<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span></span>
            <span></span>
        </div>
        <div class="invite-code">
            <p>我的邀请码</p>
            <p>{{invitationCode}}</p>
        </div>
        <div class="invite-type">
            <mt-button
                @click="chooseType = 1"
                :class="['invite-type-style', chooseType==1?'btnStyle':'']"
                size="small"
            >注册邀请</mt-button>
            <mt-button
                @click="chooseType = 2"
                :class="['invite-type-style', chooseType==2?'btnStyle':'']"
                size="small"
            >全民经纪人</mt-button>
        </div>
        <!-- 注册邀请 -->
        <div class="invite-people" v-show="chooseType == 1?true:false">
            <div class="invite-all">
                <p>我的战绩</p>
                <p v-show="inviteNoPeople==1?true:false">暂无记录</p>
                <div v-show="inviteNoPeople==2?true:false" class="invite-all-num">
                    <div>
                        <p>{{invitePeople.invitationNumber}}</p>
                        <p>邀请数</p>
                        <p>(人)</p>
                    </div>
                    <div>
                        <p>{{invitePeople.invitationAmount}}</p>
                        <p>累计获得收益</p>
                        <p>(USDT)</p>
                    </div>
                </div>
                <p></p>
            </div>
            <div class="invite-all">
                <p>邀请记录</p>
                <p v-show="inviteNoRcord==1?true:false">暂无记录</p>
                <div v-show="inviteNoRcord==2?true:false" class="invite-all-list">
                    <div class="invite-all-title">
                        <p>日期</p>
                        <p>被邀请人账号</p>
                        <p>完成情况</p>
                    </div>
                    <div class="scroll-range" style="max-height:120px;">
                        <mt-loadmore
                            :bottom-method="loadBottom"
                            :bottom-all-loaded="allLoaded"
                            :autoFill="false"
                            ref="loadmore"
                        >
                            <div
                                v-for="(item,index) in inviteList"
                                :key="index"
                                class="invite-all-list-detail"
                            >
                                <p>{{item.createTime | time}}</p>
                                <p>{{item.phoneNo | phoneNum}}</p>
                                <p>{{item.cardNum}}</p>
                            </div>
                        </mt-loadmore>
                    </div>
                </div>
                <p>*被邀请人完成认证才能获得奖励</p>
            </div>
            <div class="invite-explain">
                <p>注册奖励规则</p>
                <p>1.每邀请一个好友注册，且该好友完成身份认证，你就可以获得100XXToken奖励；</p>
                <p>2.平台拥有法律范围内对活动的最终解释，并将严查虚假邀请行为，一经发现将取消奖励资格。</p>
            </div>
            <mt-button size="normal" class="submit-btn">生成邀请卡</mt-button>
        </div>
        <!-- 全民经济人 -->
        <div class="become-broker" v-show="chooseType == 2?true:false">
            <!-- 申请前 -->
            <div v-show="brokerStatusBtn==2?false:true" class="invite-before">
                <div class="introduce-one">
                    <p>经纪人介绍</p>
                    <p>
                        1、什么是全民经纪人？
                        所有平台注册用户均可申请成为平台经纪人，不用培训上岗，只需利用你
                        的圈内关系推荐他人促成房产交易达成即可获得相应的报酬。
                    </p>
                    <p>2、有哪些报酬？</p>
                    <div>
                        <p>报酬类型：</p>
                        <div>
                            <p>1）平台Token奖励；</p>
                            <p>2）房产Token奖励。</p>
                        </div>
                    </div>
                    <div>
                        <p>报酬分配：</p>
                        <div>
                            <p>经纪人推广体系内，</p>
                            <p>第一层获得收益50%；</p>
                            <p>第二层获得收益30%；</p>
                            <p>第三层获得收益20%。</p>
                        </div>
                    </div>
                    <p>说明：不同的房产项目会有不同的收益份额，经纪人层级收益分配占比固定不变。</p>
                    <mt-button
                        @click="applyBroker"
                        v-show="brokerStatusBtn==0?true:false"
                        size="normal"
                        class="submit-btn"
                    >成为经纪人</mt-button>
                    <mt-button
                        v-show="brokerStatusBtn==1?true:false"
                        size="normal"
                        class="submit-btn submit-btn-to"
                        @click="applyBroker"
                    >申请审核中</mt-button>
                </div>
            </div>
            <!-- 申请后 -->
            <div v-show="brokerStatusBtn==2?true:false" class="invite-people">
                <div class="invite-all">
                    <p>我的战绩</p>
                    <p v-show="brokerInviteNoPeople == 1?true:false">暂无记录</p>
                    <div v-show="brokerInviteNoPeople == 2?true:false" class="invite-all-num">
                        <div>
                            <p>{{brokerAccumulate}}</p>
                            <p>交易人数</p>
                            <p></p>
                            <p class="gender">一级好友：{{brokerInvitePeople.oneNumber}}</p>
                            <p class="gender">二级好友：{{brokerInvitePeople.twoNumber}}</p>
                            <p class="gender">三级好友：{{brokerInvitePeople.threeNumber}}</p>
                            <p>(人)</p>
                        </div>
                        <div>
                            <p>{{brokerEarning}}</p>
                            <p>累计获得收益</p>
                            <p>(USDT)</p>
                        </div>
                    </div>
                    <p></p>
                </div>
                <div class="invite-all">
                    <p>邀请记录</p>
                    <p v-show="false">暂无记录</p>
                    <div class="invite-all-list">
                        <div class="invite-all-title">
                            <p>日期</p>
                            <p></p>
                            <p>已交易账号</p>
                        </div>
                        <div class="scroll-range" style="max-height:120px;">
                            <mt-loadmore
                                :bottom-method="loadBottom2"
                                :bottom-all-loaded="allLoaded2"
                                :autoFill="false"
                                ref="loadmore2"
                            >
                                <div v-for="(item,index) in brokerInviteList" :key="index" class="invite-all-list-detail">
                                    <p>{{item.createTime | time}}</p>
                                    <p></p>
                                    <p>{{item.phoneNo | phoneNum}}</p>
                                </div>
                            </mt-loadmore>
                        </div>
                    </div>
                    <p>*被邀请人完成认证才能获得奖励</p>
                </div>
                <div class="invite-explain">
                    <p>注册奖励规则</p>
                    <p>1.每邀请一个好友注册，且该好友完成身份认证，你就可以获得100XXToken奖励；</p>
                    <p>2.平台拥有法律范围内对活动的最终解释，并将严查虚假邀请行为，一经发现将取消奖励资格。</p>
                </div>
                <mt-button size="normal" class="submit-btn">生成邀请卡</mt-button>
            </div>
        </div>
        <!-- 验证弹出层 -->
        <mt-popup class="verify" v-model="popupVisible" position="center">
            <img src="../../assets/img/tijiao.png" alt />
            <p>申请已提交成功</p>
            <p>平台会在1-3个工作日内完成审核，审核通过后会以短信的方式通知您。</p>
            <mt-button class="charge-btn" size="normal" type="primary">确定</mt-button>
        </mt-popup>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            invitationCode: JSON.parse(this.$store.state.userMsg).invitationCode, //邀请码
            chooseType: "1",
            //加载注册邀请
            allLoaded: false, //数据是否加载完毕
            pageNum1: 1,
            inviteList: [], //邀请记录
            inviteNoRcord: "", //暂无邀请记录
            invitePeople: "", //邀请人数
            inviteNoPeople: "", //暂无邀请人数
            //加载全名经纪人
            allLoaded2: false, //数据是否加载完毕
            pageNum2: 1,
            brokerStatusBtn:1 , //全民经纪人的申请状态
            brokerInvitePeople: "", //邀请人数
            brokerInviteNoPeople: "", //暂无邀请人数
            brokerEarning:'',//累计获得收益
            brokerAccumulate:'',//交易人数
            brokerInviteList: [], //邀请记录
            brokerInviteNoRcord: "", //暂无邀请记录
            //弹出层
            popupVisible: false,
            token: JSON.parse(this.$store.state.userMsg).token
        };
    },
    created() {
        //获取申请状态
        this.brokerStatusBtn = JSON.parse(this.$store.state.userMsg).brokerIs
        this.inviteRcord();
        this.invitePeopleNum();
        this.brokerInviterPeople();
        this.brokerEarnings();
        this.brokerAccumulatePeople();
        this.brokerInviterRecord();
    },
    methods: {       
        //注册邀请记录
        inviteRcord() {
            var params = {
                page: this.pageNum1,
                rows: 5,
                token: this.token
            };
            this.$axios
                .get(this.address.invitationRegister, {
                    params: params
                })
                .then(res => {
                    if (res.data.code == 200) {
                        if (res.data.data.length <= 0)
                            Toast({ message: '已加载全部内容！' });
                        for (var i = 0; i < res.data.data.length; i++) {
                            this.inviteList.push(res.data.data[i]);
                        }
                        this.inviteList.length <= 0
                            ? (this.inviteNoRcord = 1)
                            : (this.inviteNoRcord = 2);
                        this.$refs.loadmore.onBottomLoaded();
                    } else {
                        Toast({ message: res.data.msg });
                        this.$refs.loadmore.onBottomLoaded();
                    }
                });
        },
        //邀请人数（非经纪人）
        invitePeopleNum() {
            var params = {
                token: this.token
            };
            this.$axios
                .get(this.address.invitationNumber, {
                    params: params
                })
                .then(res => {
                    if (res.data.code == 200) {
                        this.invitePeople = res.data.data[0];
                        if (this.invitePeople.invitationNumber == "0" || "") {
                            this.inviteNoPeople = 1;
                        } else {
                            this.inviteNoPeople = 2;
                        }
                    }
                });
        },
        //上拉加载（非经纪人）
        loadBottom() {
            this.pageNum1++;
            this.inviteRcord();
        },

        // 全民经纪人
        //成为经纪人
        applyBroker() {
            var params = {
                token: this.token
            };
            this.$axios.post(this.address.becomeBroker, params).then(res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    Toast({ message: "申请成功！" });
                    //改变存储的user信息
                    var users =this.$store.state.userMsg
                    JSON.parse(users).brokerIs = 1
                    this.$store.commit('getUserMsg',JSON.stringify(users))
                    this.brokerStatusBtn = 1;
                } else {
                    Toast({ message: res.data.msg });
                }
            });
        },
        //邀请人数(经纪人)
        brokerInviterPeople(){
            var params = {
                token:this.token
            }
            this.$axios.get(this.address.invitationNumberBroker,{params:params}).then(res => {
                // console.log(res.data,22)
                if(res.data.code == 200){
                    this.brokerInvitePeople = res.data.data
                    if (this.brokerInvitePeople.oneNumber == "0" || "") {
                            this.brokerInviteNoPeople = 1;
                        } else {
                            this.brokerInviteNoPeople = 2;
                        }
                }
            })
        },
        //累计收益（经纪人）
        brokerEarnings(){
            var params = {
                token:this.token
            }
            this.$axios.get(this.address.allIncome,{params:params}).then(res => {
                if(res.data.code == 200){
                    this.brokerEarning = res.data.data
                }
            })
        },
        //交易人数（经纪人）
        brokerAccumulatePeople(){
            var params = {
                token:this.token
            }
            this.$axios.get(this.address.transactionNumber,{params:params}).then(res => {
                // console.log(res.data,33)
                if(res.data.code == 200){
                    this.brokerAccumulate = res.data.data
                }
            })
        },
        //邀请记录（经纪人）
        brokerInviterRecord(){
            var params = {
                page: this.pageNum2,
                rows: 5,
                token: this.token
            };
            this.$axios
                .get(this.address.allBroker, {
                    params: params
                })
                .then(res => {
                    if (res.data.code == 200) {
                        // console.log(res.data,666)
                        if (res.data.data.length <= 0)
                            Toast({ message: '已加载全部内容！' });
                        for (var i = 0; i < res.data.data.length; i++) {
                            this.brokerInviteList.push(res.data.data[i]);
                        }
                        this.brokerInviteList.length <= 0
                            ? (this.brokerInviteNoRcord = 1)
                            : (this.brokerInviteNoRcord = 2);
                        this.$refs.loadmore2.onBottomLoaded();
                    } else {
                        Toast({ message: res.data.msg });
                        this.$refs.loadmore2.onBottomLoaded();
                    }
                });
        },
        //上拉加载（全民经纪人）
        loadBottom2() {
            this.pageNum2++;
            console.log(2);
            this.brokerInviterRecord();
        }
    },
    filters: {
        phoneNum(val) {
            val = "" + val;
            var ary = val.split("");
            ary.splice(3, 4, "****");
            return ary.join("");
        },
        time(val) {
            return val.split(" ")[0];
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    border-bottom: 1px solid @blackColor3;
}
.invite-code {
    width: 90%;
    margin: 15px auto;
    box-shadow: 0 0 5px 2px #eee;
    padding: 35px 15px;
    text-align: center;
    p:nth-child(1) {
        font-size: 16px;
        color: @blueColor10;
        margin-bottom: 25px;
    }
    p:nth-child(2) {
        font-size: 40px;
        color: @blueColor5;
    }
}
.btnStyle {
    background-color: @blueColor10;
    color: @white !important;
}
.invite-type {
    margin: 20px 0;
    .flexAroundCenter();
    .invite-type-style {
        border: 1px solid @blackColor3;
        color: @blackColor5;
        width: 30%;
    }
}
.invite-people {
    width: 90%;
    margin: 0 auto 15px;
    .invite-all {
        box-shadow: 0 0 5px 2px #eee;
        padding: 30px 15px 15px;
        text-align: center;
        margin-bottom: 20px;
        > p:nth-child(1) {
            font-size: 16px;
            color: @blueColor10;
        }
        > p:nth-child(2) {
            font-size: 14px;
            color: @blueColor3;
            padding: 40px 0;
        }
        .invite-all-num {
            .flexAroundCenter();
            padding: 10px 0;
            > div {
                p:nth-child(1) {
                    font-size: 24px;
                    color: @blueColor5;
                }
                p:nth-child(2) {
                    font-size: 14px;
                    color: @blueColor3;
                    margin: 8px 0 0;
                }
                p:nth-child(3) {
                    font-size: 12px;
                    color: @blueColor3;
                }
            }
        }
        .invite-all-list {
            padding: 15px 0;
            .invite-all-title,
            .invite-all-list-detail {
                text-align: center;
                margin-bottom: 15px;
                .flexStartCenter();
                > p {
                    width: 33%;
                    color: @blackColor8;
                    font-size: 14px;
                }
            }
            .invite-all-list-detail {
                margin-bottom: 5px;
                > p {
                    color: @blueColor3;
                }
            }
        }
        > p:last-child {
            font-size: 12px;
            color: @blueColor3;
            text-align: right;
        }
    }
}
.gender {
    font-size: 10px !important;
}
// 注册说明
.invite-explain {
    p {
        font-size: 12px;
        color: @blueColor3;
        line-height: 28px;
    }
}
.introduce-one {
    padding: 0 15px 15px;
    p {
        font-size: 12px;
        color: @blueColor3;
        line-height: 28px;
    }
    > div:nth-child(4) {
        margin-top: 20px;
        .flexStart();
    }
    > div:nth-child(5) {
        .flexStart();
        margin-bottom: 20px;
    }
}
//加载颜色
.scroll-range {
    color: @blueColor3;
    font-size: 12px;
}
//弹出层验证
.verify {
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
    img {
        width: 16%;
        display: block;
        margin: 0 auto;
    }
    p:nth-of-type(1) {
        margin-bottom: 20px;
    }
    p {
        text-align: center;
        font-size: 14px;
        color: @blackColor8;
        margin: 10px 0;
        line-height: 26px;
    }
    .charge-btn {
        width: 100%;
        font-size: 16px;
        background-color: @blueColor10;
    }
}
</style>
